<template>
  <!-- 背景 -->
  <div class="topbar">
    <!-- 版心wrap -->
    <div class="wrap topbarwrap">
      <!-- 左边 -->
      <div class="left">欢迎来到叩丁狼积分商城</div>
      <!-- 右边 right-->
      <ul class="right">
        <li>
          <img :src="userInfo.headImg" alt="" width="23px" />
          用户名：{{ userInfo.nickName }}
        </li>
        <li>我的积分：{{ userInfo.coin }}</li>
        <li>获取积分</li>
        <li>叩丁狼官网</li>
        <li class="car-btn btn" v-if="isLogined">
          <img src="../assets/img/cart.png" alt="" />
          <span>购物车</span>
          <strong>{{ cartTotal }}</strong>
        </li>
        <li class="btn login-btn" v-else @click="changeIsShowLoginModal(true)">
          登录
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { WeixinLoginAPI } from "../request/api";
export default {
  async created() {
    //因为微信扫码之后,页面会重新刷新, 因此topbar 也就会重新加载渲染,会重新执行
    //  console.log("tobar-created", this.$route.query.code);
    let code = this.$route.query.code;

    //  判断有没有code    code 为 0  为400   为407 的时候, 各种情况下的处理方式
    if (code) {
      let res = await WeixinLoginAPI({
        // 把code请求 发给后台
        code: code,
      });
      // console.log("res-code", res);
      // 判断code 等于0 的时候
      // 处理code 为0 的情况下
      if (res.code == 0) {
        //   1.提示微信登录成功
        //   alert("微信扫码登录成功");
        this.asyncIsShowToast({
          isShow: true,
          title: "微信扫码登录成功",
          type: "success",
        });
        // 2.修改登录状态
        this.changeisLogined(true);
        //   3.存储token
        localStorage.setItem("x-auth-token", res["x-auth-token"]);
        //   4.删除地址栏中的code
        localStorage.removeItem("code");

        // **************code为0时候,  登录成功  更新用户信息  去到topbar 里面使用
        this.asyncChangeUserInfo();

        //   ***************************
      } else if (res.code == 400) {
        //   console.log("进来了code =400");
        alert("二维码失效,请重新登录");

        this.asyncIsShowToast({
          isShow: true,
          title: "二维码失效,请重新登录",
          type: "danger",
        });

        this.changeIsShowLoginModal(true);
      } else if (res.code == 407) {
        // 第一次登录  还没有关联手机号
        //   1.提示用户再使用手机号登录一次
        //   alert("请再使用手机号登录");
        this.asyncIsShowToast({
          isShow: true,
          title: "请再使用手机号登录",
          type: "success",
        });

        //   2. 弹出登录模态框  增强体验感
        this.changeIsShowLoginModal(true);
        //   3. 存储uuid  后面手机号关联需要用到
        localStorage.setItem("uuid", res.uuid);
      }
    } else {
      // 如果没有token 就普通切换
      let token = localStorage.getItem("x-auth-token");
      this.changeisLogined(Boolean(token));

      // ********************初始化用户信息  登录成功之后,手动删除 token  点击任意一个跳转页面,  昵称等信息回到最初数据就算成功
      if (token) {
        this.asyncChangeUserInfo();
      } else {
        this.initUserInfo();
      }
    }
  },
  computed: {
    ...mapState({
      isLogined: (state) => state.loginStatus.isLogined,
      userInfo: (state) => state.userInfo.userInfo,
      cartTotal: (state) => state.userInfo.cartTotal,
    }),
  },

  data() {
    return {
      // cartTotal: 0, //购物车的数量
    };
  },
  methods: {
    //        this.asyncChangeUserInfo();
    ...mapMutations({
      changeIsShowLoginModal: "showModal/changeIsShowLoginModal",
      changeisLogined: "loginStatus/changeisLogined",
      initUserInfo: "userInfo/initUserInfo",
    }),
    ...mapActions({
      asyncChangeUserInfo: "userInfo/asyncChangeUserInfo",
    }),
  },
  //   方式一:
  // 监听  更换路由时更新状态  登录完成之后, 手动删除token 再切换路由, 购物车文字会转变成登录
  //   watch: {
  //     "$route.path": {
  //       handler(newVal, oldVal) {
  //         console.log(1111);
  //         //   获取是否有token  如果有  isLogin  true ,否则为 false
  //         let token = localStorage.getItem("x-auth-token");
  //         this.changeisLogined(Boolean(token));
  //       },
  //     },
  //   },
};
</script>

<style lang="less" scoped>
.topbar {
  height: 40px;
  color: #fffefe;
  background: #242b39;
  font-size: 14px;
  font-family: SourceHanSansSC;
  font-weight: 300;
  line-height: 40px;
  .topbarwrap {
    display: flex;
    justify-content: space-between;
    .right {
      li {
        float: left;
        margin-left: 20px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        img {
          vertical-align: middle;
          border-radius: 50px;
        }
      }
      .btn {
        width: 124px;
        height: 40px;
        background: #0a328e;
        img {
          width: 20px;
          height: 20px;
          vertical-align: middle;
        }
        span {
          margin-left: 10px;
        }
        strong {
          width: 22px;
          height: 22px;
          line-height: 22px;
          display: inline-block;
          border-radius: 50%;
          background-color: red;
        }
      }
    }
  }
}
</style>